<template>
  <div class="w-full min-h-screen p-4 bg-[#eef3f6]">
    <div class="flex flex-col w-full gap-4 lg:flex-row h-[500px]">
      <!-- 总能耗面板 -->
      <div class="flex flex-col w-full p-4 bg-white rounded-lg shadow lg:w-1/2">
        <h2 class="pb-2 mb-4 text-lg font-bold border-b">总能耗</h2>
        <div class="flex flex-col flex-1 gap-6">
          <div class="grid grid-cols-4 gap-4">
            <div
              v-for="(item, index) in energyData"
              :key="index"
              class="flex flex-col"
            >
              <div class="flex gap-2 text-gray-500">
                <div class="w-[6px]" :class="item.barColor"></div>
                <div>
                  <span class="text-sm">{{ item.label }}：</span>
                  <span class="text-xs">kWh</span>
                  <div class="text-3xl text-black count">{{ item.value }}</div>
                </div>
              </div>
            </div>
          </div>
          <div class="flex flex-col justify-between flex-1 space-y-4">
            <div ref="dailyEnergyChart" class="flex-1"></div>
            <div ref="monthlyEnergyChart" class="flex-1"></div>
          </div>
        </div>
      </div>
      <!-- 班抽出量图表 -->
      <div class="flex flex-col w-full p-4 bg-white rounded-lg shadow lg:w-1/2">
        <h2 class="pb-2 mb-2 text-lg font-bold border-b">班抽出量</h2>
        <div class="grid flex-1 grid-cols-1 gap-4 md:grid-cols-3">
          <div ref="attendanceChart" class="h-full"></div>
          <div ref="productionChart" class="h-full"></div>
          <div ref="efficiencyChart" class="h-full"></div>
        </div>
      </div>
    </div>

    <div
      class="flex items-center w-full h-[80px] my-4 bg-white rounded-lg shadow"
    >
      <span class="mx-4 font-bold lg:ml-10 lg:mr-5">液压站能耗</span>
      <el-date-picker
        v-model="curDate"
        type="date"
        placeholder="请选择日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </div>
    <!-- 液压站能耗系统 -->
    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4 h-[400px]">
      <div
        v-for="station in stations"
        :key="station.name"
        class="flex flex-col p-4 bg-white rounded-lg shadow"
      >
        <div class="flex items-center justify-between pb-2 border-b">
          <h3 class="text-lg font-bold">{{ station.name }}</h3>
          <span class="text-xs text-gray-400">设备监控分组</span>
        </div>
        <div class="flex pb-2 mt-1 border-b">
          <div ref="gaugeCharts" class="w-1/2 h-[120px]"></div>
          <div class="flex flex-col items-center justify-center w-1/2">
            <div class="mb-1 text-sm text-gray-500">月节能率</div>
            <div class="text-2xl count">
              {{ station.monthly_energy_saving_rate }}
            </div>
            <div class="flex flex-col items-center mt-1 text-gray-500">
              <div class="text-sm">当前在线/总设备</div>
              <div class="text-2xl text-black count">
                {{ station.currently_online }}/{{ station.total_equipment }}
              </div>
            </div>
          </div>
        </div>
        <div class="mt-4">
          <div class="flex justify-between px-4 pb-4 text-sm border-b">
            <div class="flex flex-col items-center gap-1">
              <span class="text-gray-500">当日能耗（kWh）</span>
              <span class="text-2xl count"
                >{{ station.energy_consumption_today }}
              </span>
            </div>
            <div class="self-center h-12 border-l border-gray-300"></div>
            <div class="flex flex-col items-center gap-1">
              <span class="text-gray-500">日电量占比（%）</span>
              <span class="text-2xl count">{{
                station.percentage_of_daily_electricity
              }}</span>
            </div>
          </div>
          <div class="mt-4">
            <div ref="stationEnergyCharts" class="h-[100px]"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import dayjs from "dayjs";
import { getData } from "@/api/api";

const attendanceChart = ref(null);
const productionChart = ref(null);
const efficiencyChart = ref(null);
const gaugeCharts = ref([]);
const dailyEnergyChart = ref(null);
const monthlyEnergyChart = ref(null);
const stationEnergyCharts = ref([]);

const energyData = [
  {
    label: "当日",
    value: "2467.800",
    percentage: 50,
    max: "5000.000",
    barColor: "bg-[#409dff]",
  },
  {
    label: "昨日",
    value: "4863.480",
    percentage: 70,
    barColor: "bg-[#c6e2fd]",
  },
  {
    label: "当月",
    value: "147843.000",
    percentage: 85,
    max: "150000.000",
    barColor: "bg-[#f66c6c]",
  },
  {
    label: "上月",
    value: "145740.000",
    percentage: 80,
    barColor: "bg-[#fcd2d3]",
  },
];

// const stations = ref([
//   {
//     id: 2,
//     name: "D401油压系统",
//     monthly_energy_saving_rate: "- -%",
//     currently_online: "- -",
//     total_equipment: "- -",
//     energy_consumption_today: "- -",
//     energy_consumption_yesterday: "- -",
//     percentage_of_daily_electricity: "- -%",
//   },
//   {
//     id: 3,
//     name: "D108油压系统(未统计)",
//     monthly_energy_saving_rate: "- -%",
//     currently_online: "- -",
//     total_equipment: "- -",
//     energy_consumption_today: "- -",
//     energy_consumption_yesterday: "- -",
//     percentage_of_daily_electricity: "- -%",
//   },
//   {
//     id: 4,
//     name: "D208油压系统",
//     monthly_energy_saving_rate: "- -%",
//     currently_online: "- -",
//     total_equipment: "- -",
//     energy_consumption_today: "- -",
//     energy_consumption_yesterday: "- -",
//     percentage_of_daily_electricity: "- -%",
//   },
//   {
//     id: 5,
//     name: "D308油压系统",
//     monthly_energy_saving_rate: "- -%",
//     currently_online: "- -",
//     total_equipment: "- -",
//     energy_consumption_today: "- -",
//     energy_consumption_yesterday: "- -",
//     percentage_of_daily_electricity: "- -%",
//   },
// ]);

const stations = ref([
  {
    id: 2,
    name: "D401油压系统",
    monthly_energy_saving_rate: "35%",
    currently_online: 10,
    total_equipment: 14,
    energy_consumption_today: 1739.28,
    energy_consumption_yesterday: 2058.154,
    percentage_of_daily_electricity: "70.69%",
  },
  {
    id: 3,
    name: "D108油压系统(未统计)",
    monthly_energy_saving_rate: "35%",
    currently_online: 9,
    total_equipment: 9,
    energy_consumption_today: 146.68,
    energy_consumption_yesterday: 254.265,
    percentage_of_daily_electricity: "5.96%",
  },
  {
    id: 4,
    name: "D208油压系统",
    monthly_energy_saving_rate: "45%",
    currently_online: 11,
    total_equipment: 11,
    energy_consumption_today: 229.16,
    energy_consumption_yesterday: 359.6,
    percentage_of_daily_electricity: "9.31%",
  },
  {
    id: 5,
    name: "D308油压系统",
    monthly_energy_saving_rate: "30%",
    currently_online: 10,
    total_equipment: 11,
    energy_consumption_today: 345.36,
    energy_consumption_yesterday: 300,
    percentage_of_daily_electricity: "14.04%",
  },
]);
const getDashboardData = async () => {
  const res = await getData();
  console.log(res.data);
  stations.value = res.data;
  initGaugeCharts();
  initStationEnergyCharts();
};

onMounted(() => {
  initAttendanceChart();
  initProductionChart();
  initEfficiencyChart();
  initGaugeCharts();
  initDailyEnergyChart();
  initMonthlyEnergyChart();
  initStationEnergyCharts();
  // getDashboardData();
});

const initAttendanceChart = () => {
  initCustomShapes();
  const chart = echarts.init(attendanceChart.value);
  const data = [309, 203, 79, 151];
  const maxData = [400, 400, 400, 400];

  chart.setOption({
    title: { text: "数量", textStyle: { fontSize: 16 } },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "15%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["甲", "乙", "丙", "丁"],
      axisLine: { show: true },
      axisTick: { show: false },
      offset: 15,
    },
    yAxis: {
      type: "value",
      max: 400,
      splitLine: {
        lineStyle: { type: "dashed" },
      },
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(219, 234, 254, 0.2)", // 背景左面
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(219, 234, 254, 0.1)", // 背景右面，稍暗
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(219, 234, 254, 0.3)", // 背景顶面，稍亮
                },
              },
            ],
          };
        },
        data: maxData,
        silent: true,
      },
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          const value = api.value(1);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(127, 177, 233)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: -2,
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(107, 157, 213)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: 2,
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(147, 197, 253)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetY: -2,
                },
              },
              {
                type: "text",
                style: {
                  text: value,
                  textFont: api.font({ fontSize: 10 }),
                  textFill: "rgb(107, 157, 213)",
                  textAlign: "center",
                  textVerticalAlign: "bottom",
                },
                position: [location[0], location[1] - 10],
              },
            ],
          };
        },
        data: data,
      },
    ],
  });
};

const initProductionChart = () => {
  initCustomShapes();
  const chart = echarts.init(productionChart.value);
  const data = [7542, 6563.5, 2796.09, 3526.25];
  const maxData = [8000, 8000, 8000, 8000];

  chart.setOption({
    title: { text: "产量(T)", textStyle: { fontSize: 16 } },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "15%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["甲", "乙", "丙", "丁"],
      axisLine: { show: true },
      axisTick: { show: false },
      offset: 15,
    },
    yAxis: {
      type: "value",
      max: 8000,
      splitLine: {
        lineStyle: { type: "dashed" },
      },
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(187, 247, 208, 0.2)", // 背景左面
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(187, 247, 208, 0.1)", // 背景右面
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(187, 247, 208, 0.3)", // 背景顶面
                },
              },
            ],
          };
        },
        data: maxData,
        silent: true,
      },
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          const value = api.value(1);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(134, 239, 172)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: -2,
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(114, 219, 152)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: 2,
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(154, 259, 192)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetY: -2,
                },
              },
              {
                type: "text",
                style: {
                  text: value.toFixed(2),
                  textFont: api.font({ fontSize: 10 }),
                  textFill: "rgb(114, 219, 152)",
                  textAlign: "center",
                  textVerticalAlign: "bottom",
                },
                position: [location[0], location[1] - 10],
              },
            ],
          };
        },
        data: data,
      },
    ],
  });
};

const initEfficiencyChart = () => {
  initCustomShapes();
  const chart = echarts.init(efficiencyChart.value);
  const data = [51.205, 55.94, 45.205, 62.795];
  const maxData = [80, 80, 80, 80];

  chart.setOption({
    title: { text: "燃耗Kg标煤/t", textStyle: { fontSize: 16 } },
    tooltip: {
      trigger: "axis",
      formatter: function (params) {
        const item = params[1];
        return item.name + " : " + item.value;
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "15%",
      top: "20%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: ["甲", "乙", "丙", "丁"],
      axisLine: { show: true },
      axisTick: { show: false },
      offset: 15,
    },
    yAxis: {
      type: "value",
      max: 80,
      splitLine: {
        lineStyle: { type: "dashed" },
      },
    },
    series: [
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(254, 205, 211, 0.2)", // 背景左面
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(254, 205, 211, 0.1)", // 背景右面
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgba(254, 205, 211, 0.3)", // 背景顶面
                },
              },
            ],
          };
        },
        data: maxData,
        silent: true,
      },
      {
        type: "custom",
        renderItem: function (params, api) {
          const location = api.coord([api.value(0), api.value(1)]);
          const value = api.value(1);
          return {
            type: "group",
            children: [
              {
                type: "CubeLeft",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(253, 164, 175)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: -2,
                },
              },
              {
                type: "CubeRight",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(233, 144, 155)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetX: 2,
                },
              },
              {
                type: "CubeTop",
                shape: {
                  api,
                  x: location[0],
                  y: location[1],
                  xAxisPoint: api.coord([api.value(0), 0]),
                },
                style: {
                  fill: "rgb(253, 184, 195)",
                  shadowBlur: 5,
                  shadowColor: "rgba(0,0,0,0.2)",
                  shadowOffsetY: -2,
                },
              },
              {
                type: "text",
                style: {
                  text: value.toFixed(3),
                  textFont: api.font({ fontSize: 10 }),
                  textFill: "rgb(233, 144, 155)",
                  textAlign: "center",
                  textVerticalAlign: "bottom",
                },
                position: [location[0], location[1] - 10],
              },
            ],
          };
        },
        data: data,
      },
    ],
  });
};

const initGaugeCharts = () => {
  gaugeCharts.value.forEach((chart, index) => {
    const gaugeChart = echarts.init(chart);
    const rate =
      parseInt(stations.value[index].monthly_energy_saving_rate) || 0;

    gaugeChart.setOption({
      title: [
        {
          text: rate + "%",
          x: "center",
          y: "center",
          textStyle: {
            fontSize: 12,
            color: "#444",
            fontWeight: "bold",
          },
        },
      ],
      polar: {
        center: ["50%", "50%"],
        radius: ["50%", "80%"],
      },
      angleAxis: {
        max: 100,
        show: false,
      },
      radiusAxis: {
        type: "category",
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          data: [rate],
          type: "bar",
          roundCap: true,
          showBackground: true,
          backgroundStyle: {
            color: "rgba(19, 84, 146, .2)",
          },
          coordinateSystem: "polar",
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  offset: 0,
                  color: "#4ADE80",
                },
                {
                  offset: 1,
                  color: "#22C55E",
                },
              ]),
            },
          },
        },
      ],
    });
  });
};

const initDailyEnergyChart = () => {
  const chart = echarts.init(dailyEnergyChart.value);
  const maxValue = energyData[0].max;

  chart.setOption({
    tooltip: {
      trigger: "axis",
      showDelay: 0,
      extraCssText: "padding:15px;font-size:14px",
      formatter: function (params) {
        const data = params[0];
        const color = data.dataIndex === 0 ? "#c6e2fd" : "#409dff";
        const label = data.dataIndex === 0 ? "昨日" : "当日";
        return `<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background-color:${color};margin-right:8px"></span>${label}：${data.value} kWh`;
      },
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    grid: {
      left: "2%",
      right: "8%",
      top: "3%",
      bottom: "13%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      max: maxValue,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        formatter: "{value}",
        color: "#e9e9e9",
      },
    },
    yAxis: {
      type: "category",
      data: ["", "日能耗"],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          emphasis: {
            barBorderRadius: 4,
          },
        },
        data: [
          {
            value: energyData[1].value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  { offset: 0, color: "#c6e2fd" },
                  { offset: 1, color: "#9ecffc" },
                ],
                false
              ),
            },
          },
          {
            value: energyData[0].value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  { offset: 0, color: "#409dff" },
                  { offset: 1, color: "#2089ff" },
                ],
                false
              ),
            },
          },
        ],
        label: {
          show: true,
          position: "right",
          formatter: "{c}",
        },
      },
    ],
  });
};

const initMonthlyEnergyChart = () => {
  const chart = echarts.init(monthlyEnergyChart.value);
  const maxValue = energyData[2].max;

  chart.setOption({
    tooltip: {
      trigger: "axis",
      showDelay: 0,
      extraCssText: "padding:15px;font-size:14px",
      formatter: function (params) {
        const data = params[0];
        const color = data.dataIndex === 0 ? "#fcd2d3" : "#f66c6c";
        const label = data.dataIndex === 0 ? "上月" : "当月";
        return `<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background-color:${color};margin-right:8px"></span>${label}：${data.value} kWh`;
      },
      axisPointer: {
        show: true,
        type: "shadow",
      },
    },
    grid: {
      left: "2%",
      right: "8%",
      top: "3%",
      bottom: "13%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      max: maxValue,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        formatter: "{value}",
        color: "#e9e9e9",
      },
    },
    yAxis: {
      type: "category",
      data: ["", "月能耗"],
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        barWidth: 30,
        itemStyle: {
          emphasis: {
            barBorderRadius: 4,
          },
        },
        data: [
          {
            value: energyData[3].value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  { offset: 0, color: "#fcd2d3" },
                  { offset: 1, color: "#fbb7b9" },
                ],
                false
              ),
            },
          },
          {
            value: energyData[2].value,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                1,
                0,
                [
                  { offset: 0, color: "#f66c6c" },
                  { offset: 1, color: "#f45555" },
                ],
                false
              ),
            },
          },
        ],
        label: {
          show: true,
          position: "right",
          formatter: "{c}",
        },
      },
    ],
  });
};

const initCustomShapes = () => {
  const offsetX = 15; // bar宽
  const offsetY = 5; // 倾斜角度

  // 绘制左侧面
  const CubeLeft = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c0 = [shape.x, shape.y];
      const c1 = [shape.x - offsetX, shape.y - offsetY + 10]; // 左侧面  左上点
      const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY + 5]; // 左侧面 左下点
      const c3 = [xAxisPoint[0], xAxisPoint[1] + 0]; // 左侧面 右下点
      ctx
        .moveTo(c0[0], c0[1])
        .lineTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .closePath();
    },
  });

  // 绘制右侧面
  const CubeRight = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const xAxisPoint = shape.xAxisPoint;
      const c1 = [shape.x, shape.y];
      const c2 = [xAxisPoint[0], xAxisPoint[1] + 0]; //右侧面 左下点
      const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY + 5]; //右侧面  右下点
      const c4 = [shape.x + offsetX, shape.y - offsetY + 10]; //右侧面 右上点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });

  // 绘制顶面
  const CubeTop = echarts.graphic.extendShape({
    shape: {
      x: 0,
      y: 0,
    },
    buildPath: function (ctx, shape) {
      const c1 = [shape.x, shape.y + 15]; //顶部菱形下点
      const c2 = [shape.x + offsetX, shape.y - offsetY + 10]; //顶部菱形右点
      const c3 = [shape.x, shape.y - offsetX + 10]; //顶部菱形上点
      const c4 = [shape.x - offsetX, shape.y - offsetY + 10]; //顶部菱形左点
      ctx
        .moveTo(c1[0], c1[1])
        .lineTo(c2[0], c2[1])
        .lineTo(c3[0], c3[1])
        .lineTo(c4[0], c4[1])
        .closePath();
    },
  });

  // 注册三个面图形
  echarts.graphic.registerShape("CubeLeft", CubeLeft);
  echarts.graphic.registerShape("CubeRight", CubeRight);
  echarts.graphic.registerShape("CubeTop", CubeTop);
};

const initStationEnergyCharts = () => {
  stationEnergyCharts.value.forEach((chart, index) => {
    const energyChart = echarts.init(chart);
    const station = stations.value[index];
    const maxValue = 2500;

    energyChart.setOption({
      tooltip: {
        trigger: "axis",
        showDelay: 0,
        extraCssText: "padding:15px;font-size:14px",
        formatter: function (params) {
          const data = params[0];
          const color = data.dataIndex === 0 ? "#c6e2fd" : "#409dff";
          const label = data.dataIndex === 0 ? "昨日" : "当日";
          return `<span style="display:inline-block;width:12px;height:12px;border-radius:50%;background-color:${color};margin-right:8px"></span>${label}：${data.value} kWh`;
        },
        axisPointer: {
          show: true,
          type: "shadow",
        },
      },
      grid: {
        left: "2%",
        right: "8%",
        top: "3%",
        bottom: "13%",
        containLabel: true,
      },
      xAxis: {
        type: "value",
        max: maxValue,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          formatter: "{value}",
          color: "#e9e9e9",
        },
      },
      yAxis: {
        type: "category",
        data: ["", "日能耗"],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      series: [
        {
          type: "bar",
          barWidth: 30,
          itemStyle: {
            emphasis: {
              barBorderRadius: 4,
            },
          },
          data: [
            {
              value: station.energy_consumption_yesterday,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#c6e2fd" },
                    { offset: 1, color: "#9ecffc" },
                  ],
                  false
                ),
              },
            },
            {
              value: station.energy_consumption_today,
              itemStyle: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  1,
                  0,
                  [
                    { offset: 0, color: "#409dff" },
                    { offset: 1, color: "#2089ff" },
                  ],
                  false
                ),
              },
            },
          ],
          label: {
            show: true,
            position: "right",
            formatter: "{c}",
          },
        },
      ],
    });
  });
};

const curDate = ref(dayjs().format("YYYY-MM-DD"));
</script>

<style lang="scss" scoped></style>
